import * as echarts from "echarts";
import { useEffect, useRef } from "react";
import { debounce } from "lodash";
interface PropsType {
  height: string;
  option: any;
}

const MyEcharts: React.FC<PropsType> = (props) => {
  const div = useRef(null);
  useEffect(() => {
    const myCharts = echarts.init(div.current);
    myCharts.setOption(props.option);

    const handleResize = debounce(() => {
      myCharts.resize();
    }, 400);

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  return <div ref={div} style={{ height: props.height }}></div>;
};

export default MyEcharts;
